<template>
	<view class="container">
<!--		<view class="head-nav">-->
<!--			&lt;!&ndash; 头部选项卡 &ndash;&gt;-->
<!--			<view :class="listIndex==y?'activite':''" @click="checkListIndex(y)" v-for="(x,y) in navList" :key="y">{{x}}-->
<!--			</view>-->
<!--		</view>-->
		<view class="main_plate" style="margin: 20rpx 30rpx 0 30rpx;">
			<view v-for="(item, index) in navList"  @click="checkListIndex(index)" :class="listIndex==index ? 'grid_part grid_active' : 'grid_part'">
				{{item}}
			</view>
		</view>
		<view class="cu-card">
			<view class="listbox" v-for="(item, index) in orderItems" :key="index">
				<view class=" titlebox">
					<view class="cu-list grid col-2 no-border " style="background: none;">
						<view class="itmev">
							<text class="text-left   text-cut"><text v-if="item.trial === 1">体验签约-</text>{{ item.title }}</text>
						</view>
						<view class="itmev ac">
							<text class="text-right margin-right color_fff" v-if="item.status === 0">收益中</text>
							<text class="text-right margin-right color_fff" v-else-if="item.status === 1">已完成</text>
						</view>
					</view>
				</view>
				<view class="text-content"  @click="navToDetails(item)">
						<view class="item_img">
							<img  :src="weburl + item.img" mode="scaleToFill" />
						</view>
						<view class="cu-item item_contcon"  >
							<view class="itm_ttxxee">订阅周期：{{ item.day }}<text v-if="item.type1 === 6">个小时</text> <text v-else>天</text></view>
							<view class="itm_ttxxee"><text v-if="item.type1 === 6">小时</text> <text v-else>日</text>收益：<text class="text-black text-df">{{ item.rate }}元</text></view> 
							<view class="itm_ttxxee">总收益：<text class="text-black text-df">{{ parseFloat(item.invest_money).toFixed(2) }}元 / {{item.givejifen}}积分 </text></view> 
							<view class="itm_ttxxee">订阅金额：<text class="text-black text-df">{{ parseFloat(item.money).toFixed(2) }}元</text></view> 
							<view class="itm_ttxxee">订阅时间：<text class="text-black text-df" style="font-size: 12px;">{{ item.create_time}}</text></view>
							<view class="itm_ttxxee">到期时间：<text class="text-black text-df" style="font-size: 12px;">{{ item.endtimes }}</text></view> 
							<view class="itm_ttxxee ac"> 
								<u-count-down :time="new Date(item.endtimes).getTime() - (timestamp *1000)"
									format="DD:HH:mm:ss" autoStart millisecond @change="onChange($event, index)">
									<view class="time">
										<view class="time__custom">
											<text class="time__custom__item">{{ timeData[index].days}}</text>
										</view>
										<text class="time__doc">天</text>
										<view class="time__custom">
											<text
												class="time__custom__item">{{ timeData[index].hours>10?timeData[index].hours:'0'+timeData[index].hours}}</text>
										</view>
										<text class="time__doc">时</text>
										<view class="time__custom">
											<text class="time__custom__item">{{ timeData[index].minutes }}</text>
										</view>
										<text class="time__doc">分</text>
										<view class="time__custom">
											<text class="time__custom__item">{{ timeData[index].seconds }}</text>
										</view>
										<text class="time__doc">秒</text>
									</view>
								</u-count-down>
							</view>
						</view>
					 

				</view>
			</view>
		</view>
		<view class="uni-loadmore color_fff" v-if="showLoadMore">{{loadMoreText}}</view>
		<view style="height: 140rpx"></view>
		<tabBar :currentPage="currentPage"></tabBar>
	</view>
</template>
<script>
	import tabBar from '@/components/tabBar/tabBar.vue'
	export default {
		components: {
			tabBar
		},
		data() {
			return {
				navList: ["进行中", "已完成"],
				orderItems: [],
				currentPage: '/pages/invest/orders',
				page: 1,
				lastPage: 0,
				loadMoreText: "加载中...",
				showLoadMore: true,
				navIndex: 1,
				listIndex: 0,
				timeData: {},
				timestamp: this.helper.now()
			}
		},
		onUnload() {

		},
		onLoad: function(option) {
			this.page = 1
			this.lastPage = 0
			this.orderItems = []
			this.loadMoreText = "加载中..."
			this.showLoadMore = true;
			this.getData(this.listIndex);
		},
		onReachBottom() {
			console.log("onReachBottom");
			console.log('我进来了page是', this.page, 'last-page是', this.lastPage, 'status是', this.listIndex)

			if (this.page > this.lastPage) {
				this.loadMoreText = "没有更多数据了!"
				return;
			} else {
				this.showLoadMore = true;
				setTimeout(() => {
					this.getData(this.listIndex);
				}, 300);
			}
		},
		onPullDownRefresh() {
			this.page = 1
			this.lastPage = 0
			this.orderItems = []
			this.loadMoreText = "加载更多"

				setTimeout(() => {
					this.getData(this.listIndex);
				}, 300);
		},
		methods: {
			onChange(e, index) {
				this.$set(this.timeData, index, e);
			},
			checkListIndex(index) {
				this.listIndex = index;
				//if(this.listIndex == 1){
				this.orderItems = []
					this.page = 1
					this.lastPage = 0
				this.getData(this.listIndex);
				console.log('执行了listindex' + this.listIndex)
				//}


			},
			getData: function(listIndex) {
				//获取基础参数
				// uni.showLoading({
				// 	title:"数据加载中",
				// 	mask:true
				// })
				this.loadMoreText = "加载中..."
				let page = this.page;
				let info = uni.getStorageSync("userinfo");
				let timestamp = this.helper.now();
				let sign = this.helper.setSign(['page=' + page, 'status=' + listIndex, 'token=' + info.token,
					'timestamp=' + timestamp
				]);
				this.helper.req({
					api: "getInvestOrders",
					timestamp: timestamp,
					data: {
						page: page,
						status: listIndex,
						token: info.token
					},
					header: {
						sign: sign
					},
					method: 'GET',
				}).then(res => {
					let last_page = res.data.data.list.last_page;

					let current_page = res.data.data.list.current_page;

					this.page = current_page + 1;
					this.lastPage = last_page;

					this.orderItems = this.orderItems.concat(res.data.data.list.data);
					this.timeData = Array(this.orderItems.length).fill({
						days: 0,
						hours: 0,
						minutes: 0,
						seconds: 0
					});
					if (this.page >= this.lastPage) {
						this.loadMoreText = "没有更多数据了!"
					}
					uni.stopPullDownRefresh();
					uni.hideLoading();
				})
			},
			navToDetails: function(a) {
				uni.navigateTo({
					url: "/pages/invest/invest?code=" + a.id
				})
			},
			navToContract: function(a) {
				uni.navigateTo({
					url: "/pages/invest/contract?code=" + a.id
				})
			},
		},
	}
</script>

<style lang="scss">
	page {
		background-color: #ddeafb;
	}
	.main_plate{
		margin: 0 2vw;
		background: url("@/static/images/ui-20/bar-bg.png");
		background-size: 100% 100%;
		display: flex;
	}
	.grid_part{
		text-align: center;
		font-size: 28rpx;
		padding: 22rpx 0;
		color:#353535;
		flex: 1;
	}
	.grid_active{
		color: #4f8dfd;
		background: url("@/static/images/ui-20/active.png") no-repeat bottom;
		background-size: 100% 100%;
	}
	.grid_active:first-child{
		color: #4f8dfd;
		background: url("@/static/images/ui-20/left.png") no-repeat bottom;
		background-size: 100% 100%;
	}
	.grid_active:last-child{
		color: #4f8dfd;
		background: url("@/static/images/ui-20/right.png") no-repeat bottom;
		background-size: 100% 100%;
	}
	
	.listbox {
		margin: 0 30rpx;

		.titlebox {
			background: linear-gradient(to bottom, #a1c3ff, #4f8efd);
			border-radius: 20rpx;
			overflow: hidden;
			
			.itmev {
				height: 100rpx;
				line-height: 70rpx;
			}
			.ac{
				text-align: right;
			}
			text {
				color: #fff;
			}
		}

		.text-content {
			border-radius: 20rpx;
			overflow: hidden;
			margin-top: -40rpx;
			background: #fff;
			display: flex;
			align-items: center;
			.item_img{
				width: 212rpx;
				height:212rpx;
				border-radius: 10rpx;
				overflow: hidden;
				margin: 0 40rpx;
				box-shadow: 0px 0px 10px 0px rgba(233, 233, 233, 0.75);
				img{
					width: 100%;
					height: 100%;
				}
			}
			.item_contcon{
				padding:30rpx 0;
				.itm_ttxxee{
					margin-bottom: 10rpx;
					color: #353535;
					text{
						color: #353535;
					}
					.time__custom{
						.time__custom__item{
							color: #fff;	
						}
					}
				}
				 
			}
		}
	}

	.panel-scroll-box {
		height: 100%;

		.panel-item {
			background: #fff;
			padding: 30px 0;
			border-bottom: 2px solid #000;
		}
	}

	.cu-list.grid.no-border {
		padding: 0;
	}

	.cu-list+.cu-list {
		margin: 0;
	}

	.head-nav {
		width: 50%;
		margin: 20rpx auto;
		padding: 25px 0px 0px 0px;
		display: flex;
		color: #fff;
		justify-content: space-between;
		align-items: center;
	}

	.activite {
		font-weight: bold;
		border-bottom: 10rpx solid #fff;
	}

	.head-nav>view {
		padding-bottom: 4px;
		width: 10vh;
		text-align: center;
		background-color: #2c869b;
		border-radius: 5px;
	}

	.box {
		background: #008000;
	}

	.time {
		@include flex;
		align-items: center;

		&__custom {
			margin-top: 4px;
			width: 22px;
			height: 22px;
			background-color: #4f8efd;
			border-radius: 4px;
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			justify-content: center;
			align-items: center;

			&__item {
				color: #fff;
				font-size: 12px;
				text-align: center;
			}
		}

		&__doc {
			color: $u-primary;
			padding: 0px 4px;
		}

		&__item {
			color: #606266;
			font-size: 15px;
			margin-right: 4px;
		}
	}

	.text-df {
		font-size: 14px;
	}
</style>